<template>
	<div class="wrapper">
		<div class="header">
			<div class="logo-wrapper">
				<image :src="userInfo.photo_url" mode="aspectFill" class="logo"></image>
			</div>
			<div class="level">
				<span>Lv.{{userInfo.user_grade}}</span>
				<span><img v-if="userInfo.user_grade.length>0" :src="'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/LV'+userInfo.user_grade+'.png'" /></span>
			</div>
			<div class="level-num">经验：{{userInfo.exp_num}}/{{LevelInfo[userInfo.user_grade].need_exp}}</div>
			<van-progress
			custom-class="process-bar"
			  :show-pivot="false"
			  color="gray"
			  :percentage="number*100"
			/>
		</div>
		<div class="list">
			<div class="list-tit">等级与经验值</div>
			<div class="item-header">
				<div class="level">等级</div>
				<div class="name">头衔</div>
				<div class="experience">所需经验值</div>
			</div>
			<div class="item-content" v-for="(item, index) in LevelInfo" :key="item.id">
				<div class="level"><img :src="'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/'+item.level_name+'.png'" /></div>
				<div class="name">{{item.name}}</div>
				<div class="experience">{{item.need_exp}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	let defaultJpg=require('../../../static/img/quan-active.png');
	export default {
		data() {
			return {
				defaultJpg:defaultJpg,
				userInfo:{},
				circle_id:'',
				LevelInfo:[],
				number:'',
				Level:'',
				exp_now:'',
				need_exp:''
			};
		},
		onLoad(query){
			this.circle_id = query.circle_id;
			this.Level = query.level;
			// this.user_id = uni.getStorageSync('userId')
			this.circleUserLeaderBoard();
			this.getGradeRuleList();
		},
		onShow(){
		},
		methods:{
			//获取哔哔榜列表
			async circleUserLeaderBoard(){
				let params = {
					page: this.page,
					limit: 10,
					circle_id: this.circle_id,
					user_token: uni.getStorageSync('userToken')
				}
				const res = await this.$api.circleUserLeaderBoard(params);
				if (res.data.level == 'success'){
					this.userInfo = res.data.user_exp;
					this.exp_now = this.userInfo.exp_num
				}else {
					uni.showToast({
						icon:'none',
						title:res.data.message
					})
				}
			},
			//获取等级规则
			async getGradeRuleList(){
				let params = {
					user_token: uni.getStorageSync('userToken')
				}
				const res = await this.$api.getGradeRuleList(params);
				if (res.data.level == 'success'){
					console.log(res)
					this.LevelInfo = res.data.data;
					this.need_exp = this.LevelInfo[this.Level].need_exp;
				}else {
					uni.showToast({
						icon:'none',
						title:res.data.message
					})
				}
			}
		},
		watch:{
			exp_now(newValue, oldValue){
				if (this.need_exp){
					this.number = newValue/this.need_exp;
				}
			},
			need_exp(newValue,oldValue){
				if (this.exp_now){
					this.number = newValue/this.need_exp;
				}
			}
		}
	}
</script>

<style lang="scss">
@import '~@/static/scss/mixin.scss';
	.wrapper{
		background: #eee;
		min-height: 100vh;
		.header{
			background-image: url("http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/level-bg.png");
			background-repeat: no-repeat;
			background-size: cover;
			height: 400rpx;
			@include flex(flex-start);
			flex-direction: column;
			padding-top: 40rpx;
			.logo-wrapper{
				padding: 20rpx;
				.logo{
					width: 100rpx;
					height: 100rpx;
					// border-radius: 360rpx;
					border-radius: 50%;
					border: 4rpx solid #000000;
				}
			}
			.level,.level-num,.logo-wrapper{
				width: 100%;
				@include flex();
			}
			.level{
				margin-bottom: 30rpx;
				span{
					font-size: 32rpx;
					font-weight: bold;
					height: 40rpx;
					line-height: 40rpx;
					img{
						width: 68rpx;
						height: 40rpx;
						margin: 0 8rpx;
					}
				}
			}
			.level-num{
				color: #292929;
				font-size: 24rpx;
				font-weight: bold;
				margin-bottom: 18rpx;
			}
		}
		
		//列表
		.list{
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			position: relative;
			background: #fff;
			padding: 20rpx 0 0 0;
			top:-20rpx;
			.list-tit{
				font-weight: bold;
				font-size: 32rpx;
				line-height: 92rpx;
				height: 92rpx;
				padding: 0 30rpx;
			}
			.item-header,.item-content{
				@include flex(space-between);
				padding:0rpx 30rpx;
				text-align: center;
				.level{
					flex:1;
					text-align: left;
				}
				.name{
					flex:2;
				}
				.experience{
					flex:1;
					text-align: right;
				}
			}
			.item-header{
				color:gray;
				font-size: 26rpx;
				color: #8B8D93;
				height: 90rpx;
			}
			.item-content{
				height: 114rpx;
				.name{
					color:#6F7073;
					font-size: 28rpx;
				}
				.experience{
					color:#6F7073;
					font-size: 28rpx;
				}
				.level{
					img{
						width: 68rpx;
						height: 40rpx;
					}
				}
			}
			.item-content:nth-child(2n){
				background: #F1F4F7;
			}
		}
	}
</style>
<style>
	.process-bar{
		width: 50vw;
		margin:0rpx auto;
	}
</style>
